<template>
  <div>
    <div class="filter">
      <div class="search">
        <div class="item">
          <label>账号</label>
          <el-input v-model="state.loginName" style="width: 70%" />
        </div>
        <div class="item">
          <label>姓名</label>
          <el-input v-model="state.userName" style="width: 70%" />
        </div>
        <div class="item">
          <label>IP</label>
          <el-input v-model="state.ip" style="width: 70%" />
        </div>
        <div class="item">
          <label>登录时间</label>
          <el-date-picker v-model="state.loginTime" type="date" style="width: 150px" />
        </div>
      </div>
      <div style="margin-left: 25px">
        <el-button type="primary" :icon="Search" @click="handleFilter"> 查询 </el-button>
        <el-button :icon="Refresh" @click="handleClear">重置</el-button>
      </div>
    </div>
    <x-table
      ref="refTable"
      name="在线用户"
      :top="47"
      page-layout="total"
      :show-remote-download-tbar="false"
      :show-clear-filters-tbar="false"
      :columns="columns"
      :data="tableData.resp.list"
      :total="tableData.resp.total"
      :loading="tableData.loading"
      @query="handleQuery"
    >
      <template #column-opera="scope">
        <div class="opera-col">
          <el-popconfirm
            :title="`确定强退用户[ ${scope.row.userName} ]吗?`"
            @confirm="handleLogout(scope.row.token, scope.row.userName)"
          >
            <template #reference>
              <el-link plain type="danger" :underline="false" :icon="CircleClose">
                <span style="margin-left: 2px"> 强退 </span>
              </el-link>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </x-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElDatePicker, ElInput, ElPopconfirm, ElMessage } from 'element-plus'
import { Search, Refresh, CircleClose } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { monitorApi } from '@/api/modules/monitor/monitor'

const refTable = ref()

const state = reactive({ loginName: '', userName: '', loginTime: '', ip: '' })

const tableData = reactive({ resp: { list: [], total: 0 }, loading: false })
const columns = [
  { prop: 'loginName', label: '账号', width: 100, fixed: true, sortable: false, search: '' },
  { prop: 'userName', label: '姓名', width: 100, fixed: true, sortable: false, search: '' },
  { prop: 'cellphone', label: '手机', width: 100, sortable: false, search: '' },
  { prop: 'email', label: '邮箱', width: 120, sortable: false, search: '' },
  { prop: 'loginTime', label: '登录时间', width: 160, sortable: false, search: '' },
  { prop: 'tokenExpireTime', label: '令牌过期时间', width: 160, sortable: false, search: '' },
  { prop: 'ip', label: 'IP地址', width: 150, sortable: false, search: '' },
  { prop: 'loginLocation', label: '登录地址', width: 150, sortable: false, search: '' },
  { prop: 'browser', label: '浏览器', width: 120, sortable: false, search: '' },
  { prop: 'os', label: '操作系统', width: 130, sortable: false, search: '' },
  {
    fixed: 'right',
    prop: 'token',
    label: '操作',
    width: 140,
    headerAlign: 'center',
    align: 'center',
    scope: 'opera',
    search: false,
    sortable: false,
    isExport: false,
    showOverflowTooltip: false
  }
]

const handleQuery = () => {
  tableData.loading = true
  let loginTime = ''
  if (state.loginTime) {
    loginTime = dayjs(state.loginTime).format('YYYY-MM-DD HH:mm:ss')
  }
  monitorApi.findOnlineUser({ ...state, loginTime }).then(resp => {
    if (resp.success) {
      tableData.resp.list = resp.data
      tableData.resp.total = resp.data.length
    }
    tableData.loading = false
  })
}

const handleFilter = () => {
  refTable.value.refresh()
}
const handleClear = () => {
  state.loginName = ''
  state.userName = ''
  state.loginTime = ''
  state.ip = ''
  refTable.value.refresh()
}

const handleLogout = (token: string, userName: string) => {
  monitorApi.logoutOnlineUser(token).then(resp => {
    if (resp.success) {
      ElMessage.success(`用户[ ${userName} ]已被强退`)
      refTable.value.refresh()
    } else {
      ElMessage.error(resp.message)
    }
  })
}
</script>

<style lang="scss" scoped>
.filter {
  padding: 0 10px 15px 10px;
  display: flex;
  align-items: center;
  > label {
    font-weight: bold;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      label {
        padding-right: 5px;
        font-weight: bold;
        color: $--color-text-secondary;
        &:after {
          content: ':';
        }
      }
    }
  }
}
</style>
